<template>
  <div>
    <Form ref="formInline" :model="searchData" inline :label-width="60">
      <FormItem label="姓名:">
        <Input type="text" v-model="searchData.realname" clearable />
      </FormItem>
      <FormItem label="手机号:">
        <Input type="text" v-model="searchData.mobile" clearable />
      </FormItem>
      <!-- <FormItem label="角色:">
        <Select v-model="searchData.role_id" style="width: 150px">
          <Option value="7">设计经理</Option>
          <Option value="8">设计师</Option>
        </Select>
      </FormItem> -->
      <Button type="primary" @click="search()">搜索</Button>
      <Button @click="reset()" style="margin-left: 10px;">重置</Button>
      <Button type="warning" @click="generateCode(0)" style="margin-left: 10px">生码</Button>
      <Button type="info" @click="download()" style="margin-left: 10px">下载Excel</Button>
    </Form>

    <Table :columns="columns" :data="list" @on-sort-change="customSort" @on-select="rowSelect" @on-select-all="allSelect"
      @on-select-cancel="rowSelectCancel" size="small" :highlight-row="true" max-height="800" border stripe>
      <template slot-scope="{ row, index }" slot="workTimeSlot">
        <div>
          {{ row.morning_start_work_time }} - {{ row.afternoon_end_work_time }}
        </div>
      </template>
      <template slot-scope="{ row, index }" slot="makeSlot">
        <Tooltip content="生码" placement="top">
          <Icon type="ios-funnel" size="24" color="#19be6b" style="cursor: pointer" @click="generateCode(row)" />
        </Tooltip>
      </template>
    </Table>

    <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize">
    </Paginate>

    <!-- 编辑 -->
    <Modal v-model="editUserModal" title="用户信息" @on-ok="editUserModalOk">
      <Form :model="formUserItem" :label-width="80">
        <FormItem label="账号">
          <Input v-model="formUserItem.account"></Input>
        </FormItem>
        <FormItem label="手机号">
          <Input v-model="formUserItem.mobile"></Input>
        </FormItem>
        <FormItem label="姓名">
          <Input v-model="formUserItem.realname"></Input>
        </FormItem>
        <FormItem label="性别">
          <RadioGroup v-model="formUserItem.sex">
            <Radio label="2" border>未知</Radio>
            <Radio label="0" border>女</Radio>
            <Radio label="1" border>男</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="角色">
          <RadioGroup v-model="formUserItem.role_id">
            <Radio :label="value.id" border v-for="value in roleList" :key="value.id">{{ value.role_name }}</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="状态">
          <RadioGroup v-model="formUserItem.status">
            <Radio label="1" border>正常</Radio>
            <Radio label="0" border>禁用</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="备注">
          <Input v-model="formUserItem.remark" type="textarea"></Input>
        </FormItem>
      </Form>
    </Modal>

    <!-- 好友列表 -->
    <Modal v-model="showFriendModal" title="好友列表" :width="60">
      <Table :columns="friendColumns" :data="friendList" size="small" :highlight-row="true" max-height="800" border
        stripe>
        <!-- <template slot-scope="{ row , index}" slot="makeSlot">
          <Tooltip content="好友列表" style="margin-left: 10px;" placement="top">
            <Icon type="ios-paper-outline" size="24" color="#19be6b" style="cursor: pointer;"
              @click="showFriend(row.id)" />
          </Tooltip>
        </template> -->
      </Table>
      <Paginate :total="friendTotal" @on-change="changePage1" @on-page-size-change="changeSize1">
      </Paginate>
    </Modal>

    <!-- 登录码 -->
    <Modal v-model="showCodeModal" title="登录验证码" @on-ok="generateCodeOk">
      <Form :model="generateCodeItem" :label-width="100">
        <FormItem label="上班时间">
          <TimePicker v-model="generateCodeItem.start_time" format="HH:mm"></TimePicker>
        </FormItem>
        <FormItem label="下班时间">
          <TimePicker v-model="generateCodeItem.end_time1" format="HH:mm"></TimePicker>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import Paginate from "@/components/paginate/paginate.vue";
export default {
  name: "designList",
  components: {
    Paginate,
  },
  data() {
    return {
      searchData: {
        sort: "desc",
        order_by: "user_id",
        role_id: 8,
        page: 1,
        limit: 10,
      },
      // 列表
      columns: [
        // {
        //   type: 'selection',
        //   width: 60,
        //   align: 'center'
        // },
        {
          title: "ID",
          align: "center",
          key: "user_id",
          width: "90",
          sortable: "custom",
        },
        {
          title: "姓名",
          align: "center",
          key: "realname",
          sortable: "custom",
        },
        {
          title: "账号",
          align: "center",
          key: "mobile",
          width: "120",
          sortable: "custom",
        },
        {
          title: "角色",
          align: "center",
          key: "role_name",
          sortable: "custom",
        },
        {
          title: "部门",
          align: "center",
          key: "department_name",
          sortable: "custom",
        },
        // {
        //   title: "评分",
        //   align: "center",
        //   key: "score",
        //   width: "90",
        //   sortable: "custom",
        // },
        {
          title: "登录码",
          align: "center",
          key: "login_code",
          width: "100",
          sortable: "custom",
        },
        {
          title: "上班时间",
          align: "center",
          key: "morning_start_work_time",
          width: "200",
          slot: "workTimeSlot",
        },
        {
          title: "使用日期",
          align: "center",
          key: "create_code_time",
          sortable: "custom",
        },
        {
          title: "更新时间",
          align: "center",
          key: "last_refresh_code_time",
          sortable: "custom",
        },
        {
          title: "操作",
          align: "center",
          slot: "makeSlot",
        },
      ],
      // 数据
      list: [],
      total: 0,
      // 编辑框
      editModal: false,
      formItem: {
        coupon_id: 0,
      },
      editUserModal: false,
      formUserItem: {},
      roleList: [],
      // 好友列表
      searchData1: {
        user_id: 0,
      },
      showFriendModal: false,
      friendColumns: [
        {
          title: "好友ID",
          align: "center",
          key: "friend_user_id",
          sortable: "custom",
        },
        {
          title: "好友名称",
          align: "center",
          key: "friend_user_name",
          sortable: "custom",
        },
        {
          title: "好友备注",
          align: "center",
          key: "nickname",
          sortable: "custom",
        },
      ],
      friendTotal: 0,
      friendList: [],
      // 生码
      showCodeModal: false,
      generateCodeItem: {
        id: 0,
        start_time: "",
        end_time: "",
        start_time1: "",
        end_time1: "",
      },
    };
  },
  methods: {
    // 查询管理员信息
    getList() {
      let params = {
        ...this.searchData,
      };
      this.$axios("/admin/design/getUserList", params).then((res) => {
        this.list = res.data;
        this.total = res.total;
      });
    },
    search() {
      this.searchData.page = 1;
      this.getList();
    },
    reset() {
      this.searchData = {
        sort: "desc",
        order_by: "user_id",
        role_id: 8,
        page: 1,
        limit: 10,
      };
      this.getList();
    },
    changePage(page) {
      this.searchData.page = page;
      this.getList();
    },
    changeSize(size) {
      this.searchData.limit = size;
      this.getList();
    },
    changePage1(page) {
      this.searchData1.page = page;
      this.getFriendList();
    },
    changeSize1(size) {
      this.searchData1.limit = size;
      this.getFriendList();
    },
    editModalOk() {
      let params = {
        ...this.formItem,
      };
      this.$axios("/admin/member/moveUser", params).then((res) => {
        this.$Message.success("执行成功");
        this.getList();
      });
    },
    getUserLevelArr() {
      this.$axios("/admin/member/getUserLevelArr").then((res) => {
        this.userLevelList = res;
      });
    },
    edit(row) {
      this.formItem.id = row.id;
      this.editModal = true;
    },
    editUser(row) {
      this.getRoleList();
      this.formUserItem = { ...row };
      this.formUserItem.sex = this.formUserItem.sex + "";
      this.formUserItem.status = this.formUserItem.status + "";
      this.editUserModal = true;
    },
    editUserModalOk() {
      let params = {
        ...this.formUserItem,
      };
      this.$axios("/admin/member/editUser", params).then((res) => {
        this.$Message.success("执行成功");
        this.getList();
      });
    },
    del(id) {
      this.$axios("/admin/member/delUser", { id: id }).then((res) => {
        this.$Message.success("执行成功");
        this.getList();
      });
    },
    customSort(column, key, order) {
      this.searchData.order_by = column.key;
      this.searchData.sort = column.order;
      this.getList();
    },
    rowSelect(selection, row) {
      this.sendType = 0;
      this.sendCouponUidArr = [];
      selection.forEach((element) => {
        this.sendCouponUidArr.push(element.id);
      });
    },
    rowSelectCancel(selection, row) {
      this.sendType = 0;
      this.sendCouponUidArr = [];
      selection.forEach((element) => {
        this.sendCouponUidArr.push(element.id);
      });
    },
    allSelect() {
      this.sendType = 1;
    },
    sendCoupon() {
      if (this.sendType == 0 && this.sendCouponUidArr.length == 0) {
        this.$Message.error("请选择要发放的用户");
        return;
      }
      this.getCouponList();
      this.selectCouponModal = true;
    },
    getCouponList() {
      this.$axios("/admin/member/getCouponList").then((res) => {
        this.couponList = res;
      });
    },
    selectCouponModalOk() {
      this.$axios("/admin/member/sendCoupon", {
        send_type: this.sendType,
        user_ids: this.sendCouponUidArr,
        coupon_id: this.formItem.coupon_id,
      }).then((res) => {
        this.$Message.success("发放成功");
        this.getList();
      });
    },
    // 启用，禁用
    statusChange(id, status) {
      this.$axios("/admin/user/setUserStatus", { id: id, status: status }).then(
        (res) => {
          this.getList();
        }
      );
    },
    // 获取角色列表
    getRoleList() {
      this.$axios("/admin/role/getSelfAndNextRoleList").then((res) => {
        this.roleList = res;
      });
    },
    // 好友列表
    showFriend(id) {
      this.searchData1.user_id = id;
      this.getFriendList();
      this.showFriendModal = true;
    },
    getFriendList() {
      this.$axios("/admin/design/getUserFriendList", this.searchData1).then(
        (res) => {
          this.friendTotal = res.total;
          this.friendList = res.data;
        }
      );
    },
    generateCode(row) {
      this.generateCodeItem.id = row.user_id;
      this.generateCodeItem.role_id = this.searchData.role_id;
      this.generateCodeItem.start_time = row.morning_start_work_time;
      this.generateCodeItem.end_time = row.morning_end_work_time;
      this.generateCodeItem.start_time1 = row.afternoon_start_work_time;
      this.generateCodeItem.end_time1 = row.afternoon_end_work_time;
      this.showCodeModal = true;
    },
    generateCodeOk() {
      this.$axios("/admin/design/generateCode", this.generateCodeItem).then(
        (res) => {
          this.$Message.success("生成成功");
          this.getList();
        }
      );
    },
    download() {
      this.$axios("/admin/design/download", this.searchData).then((res) => {
        let a = document.createElement("a");
        a.href = res.domain + "/" + res.file_path;
        a.click();
        this.$axios("/admin/design/removeFile", {
          unlink_file_name: res.file_path,
        });
      });
    },
  },
  created() {
    this.getList();
  },
};
</script>
<style></style>
